<template>
    <div class="app-container">
        <el-form :model="form" class="form-inline" ref="form" label-width="70px">
            <el-row :gutter="4">
                <el-col :lg="8" :xl="6"><el-form-item label="日期" style="width:100%">
                        <el-date-picker style="width:100%" v-model="form.date" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']">
                        </el-date-picker>
                    </el-form-item></el-col>
               
                <el-col :lg="6" :xl="4"><el-form-item style="width:100%" label="支付状态">
                        <el-select v-model="form.payStatus">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未审核" :value="0"></el-option>
                            <el-option label="待审核" :value="1"></el-option>
                            <el-option label="审核未通过" :value="2"></el-option>
                            <el-option label="审核通过" :value="3"></el-option>
                        </el-select>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item label="联系电话" style="width:100%">
                        <el-input v-model="form.phonenumber" placeholder="联系电话"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4">
                    <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
                    <el-button type="primary" @click="exportFile">导出</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table ref="table" :data="tableData">
            <el-table-column align="center" prop="contacts" label="充值金额">
            </el-table-column>
            <el-table-column align="center" prop="contacts" label="已投保金额">
            </el-table-column>
            <el-table-column align="center" prop="contacts" label="已理赔金额">
            </el-table-column>
            <el-table-column align="center" prop="phonenumber" label="联系电话">
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
            :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
    </div>
</template>
<script>
import { deepClone } from '@/utils';

export default {
    data() {
        return {
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },

            form: {
                date: '',
                phonenumber: '',
                payStatus: ''
            },
            tableData: [],
            tableHeight: 0,
            screenHeight: document.body.clientHeight
        }
    },
    methods: {
        exportFile() {
            //
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            this.page.pageNum = val
            this.getTableData()
        },
        setTableHeight() {
            this.$nextTick(() => {
                const queryConditionHeight = this.$refs.form.$el.offsetHeight
                this.tableHeight = (window.innerHeight - queryConditionHeight - 180) + 'px'
            })
        },
        getTableData() {
            const params = {
                ...deepClone(this.form),
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            this.$get('/warranty/invoice/list', params).then(res => {
                if (res && res.code * 1 === 200) {
                    this.tableData = res.rows
                    this.page.total = res.total
                } else {
                    this.tableData = []
                    this.page.total = 0
                }
            })
        }
    },
    mounted() {
        window.onresize = () => {
            this.setTableHeight()
        }
        this.setTableHeight()
        this.getTableData()
    }
}
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
    width: 100%;

    .el-form-item__label {
        // padding: 0;
    }
}
</style>
